<!doctype html>
<html class="no-js">
<head>
  <!-- 公共head Begin -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="萌宠之家-C2B2C社会化电商平台" />
  <meta name="description" content="《萌宠之家-C2B2C社会化电商平台》是一个基于宠物社区的一站式电商平台。" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">

  <title>萌宠之家-C2B2C社会化电商平台->运营后台</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="../statics/img/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="../statics/img/app-icon72x72@2x.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Pet Mall"/>
  <link rel="apple-touch-icon-precomposed" href="../statics/img/app-icon72x72@2x.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="../statics/img/app-icon72x72@2x.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <link rel="stylesheet" href="../statics/AmazeUI/assets/css/amazeui.min.css">
  <link rel="stylesheet" href="../statics/AmazeUI/assets/css/admin.css">
  <link rel="stylesheet" href="../statics/AmazeUI/assets/css/app.css">

  <!--[if (gte IE 9)|!(IE)]><!-->
  <script src="../statics/AmazeUI/assets/js/jquery.min.js"></script>
  <!--<![endif]-->
  <script src="../statics/AmazeUI/assets/js/amazeui.min.js"></script>
  <script src="../statics/AmazeUI/assets/js/amazeui.modal.js"></script>
  <script src="../statics/js/list.js"></script>
  <!-- 百度编辑器
  <script type="text/javascript" charset="utf-8" src="../statics/UEditor/ueditor.config.js"></script>
  <script type="text/javascript" charset="utf-8" src="../statics/UEditor/ueditor.all.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="../statics/UEditor/lang/zh-cn/zh-cn.js"></script>
  <script type="text/javascript">
      var ue = UE.getEditor('editor',{
              initialFrameWidth:"100%" //初始化选项
              //scaleEnabled:true//scaleEnabled {Boolean} [默认值：false] //是否可以拉伸长高，默认true(当开启时，自动长高失效)
          }
      );
  </script>
   -->
  <script src="../statics/AmazeUI/assets/js/validator.js"></script>
  <script src="../statics/js/plugin/jquery.livequery.js"></script>
  <!-- 此处form的导入和amazeui.min.js会有冲突，请根据需要使用
  <script src="statics/js/plugin/jquery.form.js"></script>
   -->
  <!--
  <script>
      $().ready( function() {
          AMUI.plugin('mySelected', AMUI.selected);
          $('[data-am-selected]').mySelected({btnWidth: '100%', maxHeight: '200px', btnSize: 'sm', btnStyle: 'secondary'});
      });
  </script>
      -->
  <script src="../statics/js/plugin/jquery.metadata.js"></script>
  <script src="../statics/js/plugin/jqPaginator.min.js"></script>
  <script src="../statics/js/base.js"></script>
  <script src="../statics/js/jquery.lSelect.js"></script>
  <!-- 公共head End -->
</head>
<body>
  <div class="admin-content">
    <div class="admin-content-body">
      <div class="am-cf app-padding-title">
        <div class="am-fl am-cf">
          <strong class="am-text-primary am-text-lg">会员管理</strong> / <small>会员列表</small>
        </div>
      </div>
      
      <hr data-am-widget="divider" class="am-divider am-divider-dotted am-margin-0" />
      
      <form class="am-form" id="listForm" onsubmit="return false;" action="http://localhost:8080/user/search" method="post">
      <div class="am-g app-padding-toolbar">
        <div class="am-u-sm-6 am-u-md-4 am-padding-0">
          <div class="app-padding-toolbar-item">
            <select id="status" name="status" data-am-selected="{btnWidth: '100%', btnSize: 'sm', maxHeight: '200px'}">
              <option value="-1">全部</option>
		      <option value="1">正常</option>
		      <option value="2">禁用</option>
            </select>
          </div>
        </div>
        
        <div class="am-u-sm-12 am-show-sm-only am-margin-xs"></div>

        <div class="am-u-sm-12 am-u-md-4 am-padding-right-0">
          <div class="am-input-group am-input-group-sm">
            <input type="text" class="am-form-field" id="keyword" name="keyword" value="" placeholder="请输入关键字" />
            <span class="am-input-group-btn">
              <button id="searchButton" class="am-btn am-btn-default" type="button">搜索</button>
            </span>
          </div>
        </div>
        <div class="am-u-sm-12 am-u-md-4 am-padding-right-0"></div>
      </div>
      
      <hr data-am-widget="divider" class="am-divider am-divider-dashed am-margin-0" />
      
      <div class="am-scrollable-horizontal">
        <table id="tblUserList" class="am-table am-table-striped am-table-hover table-main am-text-nowrap am-margin-bottom-0">
          <thead>
            <tr>
              <th>序号</th>
              <th>状态</th>
              <th>操作</th>
              <th>用户名</th>
              <th>宠物数</th>
              <th>粉丝数</th>
              <th>收藏数</th>
              <th>电子邮箱</th>
              <th>手机号码</th>
              <th>创建时间</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
      <!-- 分页 -->
      <hr data-am-widget="divider" class="am-divider am-divider-dashed am-margin-0" />
      <div id="divPagination" class="am-margin-left am-text-xs">
        <ul id="pagination" class="am-pagination"></ul>
      </div>

      <h3 id="noData" style="display: none;" class="am-kai am-text-center am-margin-xs">没有找到任何记录!</h3>
      </form>
    </div>
  </div>
<!-- content end -->
</body>
<script>

    // 用户列表
    let userList = new Array();

    // 查询条件对象
    let queryObject = new Object();

    let jsonUser;
    let token;

    $().ready(function() {

        // 判断用户信息和token是否存在
        jsonUser = sessionStorage.getItem("admin");
        token = sessionStorage.getItem("token");

        if(!jsonUser || !token) {
            top.location.href = 'admin_login.html';
            return;
        }

        // 判断当前页面是否在框架页中，如果不存在，就跳转到后台中心页面
        if(self.location == top.location)
            location.href='admin_center.html';


        // 注册查询按钮事件
        $("#searchButton").click(function(){

            // 获取查询数据
            let status = $("#status").val();
            let keyword = $("#keyword").val();

            // 封装查询请求数据
            queryObject.status = status;
            queryObject.keyword = keyword;

            // 加载'用户列表'数据
            loadUserList();

        });// $("#searchButton").click(function());


        // 加载'用户列表'数据
        loadUserList();

    });// $().ready(function());

/**	加载'用户'列表数据 **/
function loadUserList() {

    queryObject.token = token;

    // 加载'用户列表'数据
    $.post('http://localhost:8080/user/search', queryObject, function (result) {
            // 如果返回的是token失效，就重新登录
            if(result.code == 419) {

                Modal.confirm('当前会话token失效，请重新登录页面！', {
                    closeViaDimmer: false,
                    onConfirm: function() {
                        top.location.href = 'admin_login.html';
                    },
                    onCancel: function() {
                        top.location.href = 'admin_login.html';
                    }
                });// Modal.confirm();

                return;
            }// if(result.code == 419);

            // 如果返回的数据的响应码不是'成功(200)'
            if(result.code != 200) {
                Modal.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200
            // 就进行表格数据填充
            let pageResult = result.data;

            userList = pageResult.list;

            // 填充表格数据
            fillUserList();

            // 初始化分页插件
            $("#pagination").remove();
            $("#divPagination").append('<ul id="pagination" class="am-pagination"></ul>');

            $.jqPaginator( '#pagination', {
                totalPages: pageResult.pages,
                totalCounts:pageResult.total,
                visiblePages: 10,
                currentPage: pageResult.pageNum,
                prev: '<li><a href="javascript:void(0);"><span class="am-icon-arrow-circle-left"></span> 上一页</a></li>',
                next: '<li><a href="javascript:void(0);">下一页 <span class="am-icon-arrow-circle-right"></span></a></li>',
                page: '<li><a href="javascript:void(0);">{{page}}</a></li>',
                activeClass: 'am-active',
                onPageChange:function( num, type ){

                    // 加载指定页码数据
                    if (type == 'change'){
                        queryObject.currentPage = num;
                        loadOrderList();
                    }

                }// onPageClick();

            });// $("#pagination").twbsPagination();

            $("#pagination").append('<li>共' + pageResult.pages + '页</li>');

        });// $.post();

}// loadUserList();

/** 填充表格数据 **/
function fillUserList( ) {

    // 清空表格数据
    $('#tblUserList tbody').empty();
    // 隐藏显示提示
    $('#noData').hide();

    // 如果没有集合数据，就直接返回
    if( !userList || userList.length == 0 ){
        // 设置没有数据提示
        $('#noData').show();
        return;
    }// if();

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < userList.length; i++ ) {

        let user = userList[i];

        let trId = '<tr id="listTr' + user.id + '">';

        // 序号
        let tdNo = '<td>' + (i+1) + '</td>';

        // 状态
        let status = USER_STATUS[user.status];
        let tdStatus = '<td><strong class="am-text-success">' + status + '</strong></td>';

        // 如果用户状态为‘禁用’
        if( user.status == USER_STATUS_CONST.IN_ACTIVE ){
            tdStatus = '<td><strong class="am-text-danger">' + status + '</strong></td>';
        }

        // 操作
        let tdOpt = '<td><div class="am-btn-group am-btn-group-xs">';

        // '激活'按钮
        let btnActiveStatus = '<button type="button" class="am-btn am-btn-default am-btn-xs am-text-success app-table-button-padding" onclick="toggleStatus(' + USER_STATUS_CONST.ACTIVE + ',\'' + user.id +'\')">'
                              + '<span class="am-icon-hand-o-up"> 激活</span></button>';

        // '禁用'按钮
        let btnInActiveStatus = '<button type="button" class="am-btn am-btn-default am-btn-xs am-text-danger app-table-button-padding" onclick="toggleStatus(' + USER_STATUS_CONST.IN_ACTIVE + ',\'' + user.id +'\')">'
            + '<span class="am-icon-hand-o-up"> 禁用</span></button>';

        // 操作封装
        // 判断当前用户状态是否为'禁用'
        if( user.status == USER_STATUS_CONST.IN_ACTIVE ) {
            // 显示'激活'按钮
            tdOpt += btnActiveStatus;
        } else {
            // 显示'禁用'按钮
            tdOpt += btnInActiveStatus;
        }

        tdOpt += '</div></td>';


        // 用户名
        let tdUsername = '<td><strong>' + user.username + '</strong></td>';

        // 宠物数
        let tdPetNum = '<td><strong class="am-text-warning">' + user.petNum + '</strong></td>';

        // 粉丝数
        let tdFansNum = '<td><strong class="am-text-secondary">' + user.fansNum + '</strong></td>';

        // 收藏数
        let tdFollowNum = '<td><strong class="am-text-success">' + user.followNum + '</strong></td>';

        // 电子邮箱
        let tdEmail = '<td>' + user.email + '</td>';

        // 手机号码
        let tdPhone = '<td>' + user.phone + '</td>';

        // 创建时间
        let tdCreateTime = '<td><span title="' + user.createTime + '">' + user.createTime + '</span></td>';

        // 封装整条tr单元格
        trId += tdNo + tdStatus + tdOpt + tdUsername + tdPetNum + tdFansNum
                + tdFollowNum + tdEmail + tdPhone + tdCreateTime + '</tr>';

        // 将构造好的单元格数据，填充到表格中
        $('#tblUserList tbody').append(trId);

    }// for();

}// fillOrderList();

/**
 * ‘禁用/激活’ 用户
 * @param status 状态码
 * @param userId 用户id
 */
function toggleStatus( status, userId ) {

    let strStatus = status == USER_STATUS_CONST.ACTIVE? '激活':'禁用';

    Modal.register(['confirm','alert']);
    Modal.confirm("您确定要" +strStatus+ "该用户吗？",{
        relatedTarget: this,
        onConfirm: function(options) {
            $.ajax({
                type: 'POST',
                url: 'http://localhost:8080/user/updateStatus',
                dataType: "json",
                async: false,
                data: {
                    token: token,
                    userId: userId,
                    status: status
                },
                success: function( result ) {

                    // 如果返回的数据的响应码不是'成功(200)'
                    if (result.code != 200) {
                        Modal.alert(result.msg);
                        return;
                    }

                    // 如果返回的数据响应码为200
                    Modal.alert(strStatus + '成功！');

                    // 重新加载用户列表
                    loadUserList();

                }// success: function( result );
            });
        }// onConfirm: function(options);
    });
}// toggleStatus( status, userId );
</script>
</html>
